<template>
  <div class="content">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      :title="$route.query.type ? '我的文案库' : '文案素材库'"
      fixed
    >
      ></van-nav-bar
    >

    <main>
      <div class="poster_type" v-if="$route.query.type">
        <ul>
          <li :class="{ active: types == 1 }" @click="setTypes(1)">
            已提交
            <i></i>
          </li>
          <li :class="{ active: types == 2 }" @click="setTypes(2)">
            审核中
            <i></i>
          </li>
          <li :class="{ active: types == 3 }" @click="setTypes(3)">
            已入库
            <i></i>
          </li>
        </ul>
      </div>
      <van-search
        shape="round"
        placeholder="搜索文案标题"
        v-model="title"
        @input="searchKey"
      />

      <van-tabs
        v-model="type"
        @click="setType"
        color="blue"
        title-active-color="#0264D1"
        line-width="30"
        sticky
        offset-top="100px"
        swipeable
      >
        <van-tab v-for="(item, index) in tabs" :key="index" :title="item.title">
          <div
            class="list"
            v-if="articleArr.length != 0"
            :style="{
              height: $route.query.type
                ? 'calc(100vh - 240px)'
                : 'calc(100vh - 194px)',
            }"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                class="item"
                v-for="(item, index) in articleArr"
                :key="index"
                @click="$router.push(`/detail?id=${item.id}&type=1`)"
              >
                <div class="left">
                  <img :src="$publicObj.urlImg(item.cover)" />
                  <img
                    src="../../assets/images/task/getMoney.png"
                    alt=""
                    class="money"
                    v-show="item.type == 9"
                  />
                </div>
                <div class="right">
                  <span class="title">{{ item.title }}</span>
                  <span class="p">{{ item.description }}</span>
                  <div class="bottom">
                    <span>阅读:{{ item.yuedu || 0 }}次</span>
                    <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
                  </div>
                </div>
              </div>
            </van-list>
          </div>
          <van-empty v-else description="暂无数据" />
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "", //搜素的文章标题
      articleArr: [], //文章列表
      page: 1, //当前页数,
      agentId: "",
      wxUserInfo: {}, //微信用户个人信息
      type: 0,
      types: 1, //已提交 审核中 已入库
      tabs: [],
      loading: false,
      finished: false,
      page: 1, //页数
      limit: 10, //条数
      totalPage: "",
    };
  },

  async mounted() {
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));

    this.agentId = sessionStorage.getItem("agentId");

    // 获取个人信息
    await this.$store.dispatch("updateUserInfo");

    this.getArticle();
    this.getArticleType();
  },

  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.getArticle();
      // 加载状态结束
      this.loading = false;
    },
    // 切换
    setTypes(n) {
      this.types = n;

      this.getArticle();
    },
    //搜素
    searchKey() {
      clearTimeout(this.time);
      this.time = setTimeout(async (_) => {
        this.getArticle();

        this.time = null;
      }, 700);
    },
    // 切换
    setType(name, title) {
      let obj = this.tabs.find((item, index) => {
        return item.title == title;
      });
      this.type = obj.id;
      this.getArticle();
    },
    //获取文章类型
    async getArticleType() {
      let res = await this.$api.getArticleType();
      // console.log(res);
      this.tabs = res.data.map((item) => {
        return { title: item.typeName, id: item.number };
      });
    },
    //获取文章列表
    async getArticle() {
      let obj = {
        // page: 1,
        // limit: 10000000,
        page: this.page,
        limit: this.limit,
        type: 7,
        userId: sessionStorage.getItem("agentId"),
        openId: this.wxUserInfo.openid,
        name: this.wxUserInfo.nickname,
        image: this.wxUserInfo.headimgurl,
        sex: this.wxUserInfo.sex,
        city: this.wxUserInfo.city,
        province: this.wxUserInfo.province,
        tableType: 1,
        account: 1,
        status: 2,
        operation: 4,
        title: this.title,
        articleStoreType: this.type,
      };
      let isCheck;
      if (this.types == 1) {
        isCheck = "";
      } else if (this.types == 2) {
        isCheck = 0;
      } else if (this.types == 3) {
        isCheck = 1;
      }
      if (this.$route.query.type) {
        obj.account = this.$store.state.userInfo.account;
        obj.isCheck = isCheck;
      }

      let res = await this.$api.getArticleArr(obj);

      if (res.code != 0) return;
      if (res.status == 0) {
        this.$router.push("/default");
        return;
      }
      if (this.page == 1) {
        this.articleArr = res.page.list || [];
      } else {
        this.articleArr.push(...res.page.list);
      }
      this.totalPage = res.page.totalPage;
    },
  },
};
</script>

<style scoped lang="less">
main {
  padding: 0 15px;

  padding-top: 46px;
  /deep/.van-tab--active {
    font-weight: 700;
  }
  .poster_type {
    margin-top: 14px;
    ul {
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      li {
        font-size: 16px;
        color: #666;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        padding: 5px 0;
        i {
          width: 28px;
          height: 3px;

          border-radius: 3px;
          position: absolute;
          bottom: -5px;
        }
      }
      .active {
        font-weight: 700;
        color: #4f5cd3;
      }
    }
  }

  .list {
    overflow-y: scroll;

    .item {
      display: flex;
      margin-top: 12px;
      .left {
        width: 90px;
        height: 90px;
        margin-right: 15px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .money {
          width: 35px;
          height: 35px;
          position: absolute;
          right: 0;
          top: 0;
          border-radius: none;
        }
      }
      .right {
        flex: 1;

        span {
          font-size: 11px;
          color: #999999;
        }
        .title {
          margin-top: 5px;
          display: block;
          font-size: 14px;
          color: #333333;
        }
        .p {
          margin-top: 3px;
          height: 30px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        .bottom {
          width: 246px;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          span {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
